<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card>
					<el-tabs
						v-model="activeName"
						class="demo-tabs"
						@tab-click="handleClick"
					>
						<el-tab-pane label="潜在学员" name="first">
							<el-row :gutter="20">
								<el-col :span="6">
									<div class="left">
										<div class="stuinfo">学员信息</div>
										<div>
											<el-input
												v-model="input1"
												class="w-50 m-2"
												placeholder="学员姓名/手机号/卡号"
											>
											</el-input>
										</div>
									</div>
								</el-col>
								<el-col :span="7">
									<div class="left">
										<div class="stuinfo">跟进状态</div>
										<div>
											<el-select
												v-model="value"
												clearable
												class="m-2"
												placeholder="请选择跟进状态"
											>
												<el-option
													v-for="item in options"
													:key="item.value"
													:label="item.label"
													:value="item.value"
												/>
											</el-select>
										</div>
									</div>
								</el-col>
								<el-col :span="6">
									<div class="left">
										<div class="stuinfo">跟进人</div>
										<div>
											<el-input
												v-model="input1"
												class="w-50 m-2"
												placeholder="请选择跟进人"
											>
											</el-input>
										</div>
									</div>
								</el-col>
								<el-col :span="5">
									<div class="left">
										<el-button>重置</el-button>

										<el-button
											type="primary"
											@click="dialogTableVisible = true"
											>查询</el-button
										>

										<div class="more">更多搜索</div>
									</div>
								</el-col>
							</el-row>
							<div class="konbai"></div>
							<el-row gutter="20">
								<el-col span="16">
									<div class="left">
										<el-button
											type="primary"
											:icon="EditPen"
											>添加潜在学员</el-button
										>
										<el-button>今日待跟进</el-button>
										<el-button>分配跟进人</el-button>
										<el-button>添加跟进记录</el-button>

										<div class="morecz">
											<el-select
												v-model="values"
												clearable
												placeholder="更多操作"
											>
												<el-option
													v-for="item in option"
													:key="item.value"
													:label="item.label"
													:value="item.value"
												/>
											</el-select>
										</div>
									</div>
								</el-col>
							</el-row>
							<div class="konbai2"></div>
							<el-row>
								<el-col>
									<el-table
										:data="tableData"
										border
										style="width: 100%"
									>
										<el-table-column
											type="selection"
											width="40"
										/>
										<el-table-column
											prop="date"
											label="学员姓名"
											width="100"
										/>
										<el-table-column
											prop="name"
											label="手机号"
											width="160"
										/>
										<el-table-column
											prop="address"
											label="年龄"
											width="60"
										/>
										<el-table-column
											prop="address"
											label="生日"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="跟进状态"
											width="120"
										/>
										<el-table-column
											prop="address"
											label="跟进人"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="推荐人"
											width="80"
										/>
										<el-table-column
											prop="address"
											label="意向级别"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="来源"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="最后一次跟进"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="下一次跟进"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="备注"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="添加日期"
											width="100"
										/>
										<el-table-column
											prop="address"
											label="操作"
											width="100"
										/>
									</el-table>
								</el-col>
							</el-row>
						</el-tab-pane>
						<el-tab-pane label="在读学员" name="second">
							<h1>在读学员</h1>
						</el-tab-pane>
						<el-tab-pane label="历史学员" name="third">
							<h1>历史学员</h1>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>

		<el-dialog v-model="dialogTableVisible" title="请选择跟进人">
			<div class="dialog">
				<div>员工信息</div>
				<div style="width: '120px'"><el-input v-model="find"  placeholder="姓名/手机号码"></el-input></div>
				<el-button type="primary" @click="findphone">查询</el-button>
			</div>
			<el-table :data="gridData">
				<el-table-column property="name" label="员工名称" width="150" />
				<el-table-column
					property="phone"
					label="手机号码"
					width="160"
				/>
				<el-table-column
					property="isStued"
					label="是否授课"
					width="120"
				/>
				<el-table-column property="role" label="角色" width="150" />
				<el-table-column property="beizhu" label="备注" width="120" />
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:total="1000"
			/>
		</el-dialog>
	</div>
</template>

<script setup>
import { EditPen } from '@element-plus/icons-vue';
import { ref } from 'vue';

const activeName = ref('first');
const value = ref('');
const options = [
	{
		value: '待跟进',
		label: '待跟进'
	},
	{
		value: '跟进中',
		label: '跟进中'
	},
	{
		value: '已约课',
		label: '已约课'
	},
	{
		value: '已体验',
		label: '已体验'
	},
	{
		value: '已失效',
		label: '已失效'
	}
];

const values = ref('');
const option = [
	{
		values: '学员招生码',
		label: '学员招生码'
	},
	{
		values: '导入潜在学员',
		label: '导入潜在学员'
	},
	{
		values: '批量增送课时',
		label: '批量增送课时'
	}
];

//chaxun
const dialogTableVisible = ref(false);
const find=ref('')
const gridData = [
	{
		name: '千峰教育',
		phone: '17773568017',
		isStued: '是',
		role: '校长',
		beizhu: ''
	},
	{
		name: '小禾帮(教育)',
		phone: '15643268492',
		isStued: '是',
		role: '校长',
		beizhu: ''
	},
	{
		name: '喝开水',
		phone: '14556237581',
		isStued: '是',
		role: '校长',
		beizhu: ''
	},
	{
		name: '臻的c',
		phone: '15562341023',
		isStued: '是',
		role: '校长',
		beizhu: ''
	}
];
const findphone=()=>{
   if (gridData.some(obj => Object.values(obj).includes(find.value))) {
  console.log('Input value exists in the array');
} else {
  console.log('Input value does not exist in the array');
}
}

</script>

<style lang="scss" scoped>
.stuinfo {
	margin-top: 6px;
	margin-right: 15px;
}
.left {
	display: flex;
}
.el-col-7 {
	margin-right: -30px;
}
.more {
	font-size: 12px;
	color: blue;
	margin-top: 10px;
	margin-left: 10px;
	cursor: pointer;
}
.konbai {
	height: 20px;
	width: 10px;
}
.morecz {
	width: 120px;
	margin-left: 15px;
}
.konbai2 {
	width: 10px;
	height: 5px;
}
.dialog{
	display: flex;
	width: 370px;
	justify-content: space-around;
	align-items: center;
}
</style>
